<template>
  <div class="pwdback">
    <head_><h1>注册</h1></head_>

    <div class="inp">
      <label for="phone">手机号</label>
      <input
        type="text"
        placeholder="请输入手机号"
        id="phone"
        v-model="phone"
        @blur="changepin"
      />
    </div>

    <div class="pin">
      <label for="pin">验证码</label>
      <input v-model="pin" type="text" placeholder="请输入验证码" id="pin" />
      <button
        :class="[pincolor == true ? 'button_active' : '']"
        id="yzm"
        @click="getpin"
        :disabled="bool"
      >
        {{ pintext }}
      </button>
    </div>

    <div class="inp">
      <label for="newpwd">新密码</label>
      <input
        v-model="pw"
        :type="flas ? tests : pass"
        placeholder="请输入密码"
        id="newpwd"
      />
      <van-icon
        @click="eye_active"
        :class="flas ? 'eye_active' : ''"
        name="eye-o"
        size="0.36rem"
      />
    </div>

    <div class="inp">
      <label for="sure">确认</label>
      <input
        :type="flas2 ? tests : pass"
        v-model="surepw"
        placeholder="再次输入密码"
        id="sure"
      />
      <van-icon
        @click="eye_active2"
        :class="flas2 ? 'eye_active' : ''"
        name="eye-o"
        size="0.36rem"
      />
    </div>

    <div class="submit">
      <button
        @click="submit"
        :disabled="submitdisplay"
        :class="[submitcolor == true ? 'submit_active' : '']"
      >
        提交
      </button>
    </div>
  </div>
</template>

<script>
import head_ from "../jingtai_/header";
import { getCode, register,isExists} from "../../request/login_register/login_register";
export default {
  props: {},
  data() {
    return {
      phone: "",
      pin: "",
      pw: "",
      surepw: "",
      pintext: "获取验证码",
      pincolor: false,
      timerid: null,
      time: 0,
      flas: false,
      pass: "password",
      tests: "text",
      flas2: false,

      submitdisplay: false,
      submitcolor: true,
      regphone: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
      regpw: /^\w{6,12}$/,
      bool: true,
    };
  },
  // mounted(){
  //   let data = {
  //     "passWord":"123456",
  //     "verifyCode":"283660"
  //   }
  //   register(data).then((res)=>{
  //     console.log(res)
  //   })
  // },

  methods: {
    changepin() {
      this.pincolor = true;
      this.bool = false;
      //判断是否存在
      isExists({ phoneNum: this.phone }).then((res) => {
            // alert(JSON.stringify(res));
             if (res.code == 2000) {
                 this.$toast.fail("此手机号已经注册，可以找回密码");
                 this.phone ="";
             }
      })
    },

    // 获取验证码按钮方法
    getpin() {
      //函数
      getCode({ phone: this.phone }).then((res) => {
        if (res.code == 2000) {
          // alert(JSON.stringify(res));
          clearInterval(this.timerid);
          this.time = 60;
          this.pintext = `重新获取(${this.time})`;
          this.timerid = setInterval(() => {
            this.time--;
            this.pintext = `重新获取(${this.time})`;
            if (this.time <= 0) {
              this.time = 60;
              clearInterval(this.timerid);
              this.pintext = "获取验证码";
            }
          }, 1000);
        } else {
          alert(res.message);
        }
      });
    },
    eye_active() {
      this.flas = !this.flas;
    },
    eye_active2() {
      this.flas2 = !this.flas2;
    },
    // 表单验证
    submit() {
      if (this.regphone.test(this.phone) == false) {
        this.$toast.fail("请输入正确的手机号");
      } else if (this.pin.length < 4) {
        this.$toast.fail("验证码不正确");
      } else if (this.regpw.test(this.pw) == false) {
        this.$toast.fail("密码格式不正确");
      } else if (this.pw != this.surepw) {
        this.$toast.fail("两次密码输入不一致");
      } else {
        register({
          phoneNum: this.phone,
          password: this.pw,
          confirmPassword: this.surepw,
          code: this.pin,
        }).then((res) => {
          // alert(JSON.stringify(res));
          if (res.code == 2000) {
            this.$toast.success({
              message: "注册成功",
              duration: 2000,
              onClose: (res) => {
                return this.$router.push("/login");
              },
            });
          }else{
            this.$toast.fail(res.message);
          }
        });
      }
    },
  //   updated() {
  //     if (
  //       this.phone != "" &&
  //       this.pin != "" &&
  //       this.pw != "" &&
  //       this.surepw != ""
  //     ) {
  //       this.submitdisplay = false;
  //       this.submitcolor = true;
  //     } else {
  //       this.submitcolor = false;
  //       this.submitdisplay = true;
  //     }
  //   },
  },

  components: { head_ },
};
</script>

<style scoped lang="less">
.pwdback {
  padding: 0 0.24rem;
  .title {
    display: flex;
    align-items: center;
    height: 0.88rem;
  }
  span {
    flex: 1;
    text-align: center;
    font-size: 0.34rem;
    font-weight: bolder;
  }
  .inp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.29rem;
    position: relative;
    label {
      font-size: 0.26rem;
      font-weight: bolder;
    }
    input {
      width: 5.48rem;
      height: 0.66rem;
      font-size: 0.22rem;
      padding-left: 0.19rem;
      border: 2px solid #e4e4e4;
      border-radius: 0.04rem;
      &::placeholder {
        color: #999;
      }
    }
    .van-icon-eye-o {
      position: absolute;
      top: 0.2rem;
      right: 0.19rem;
    }
    .eye_active {
      color: #2094ff;
    }
  }

  .pin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.29rem;
    label {
      font-size: 0.26rem;
      font-weight: bolder;
    }
    input {
      width: 2.98rem;
      height: 0.66rem;
      font-size: 0.22rem;
      padding-left: 0.19rem;
      margin-left: 0.2rem;
      border: 2px solid #e4e4e4;
      border-radius: 0.04rem;
      &::placeholder {
        color: #999;
      }
    }
    button {
      width: 2rem;
      height: 0.66rem;
      font-size: 0.22rem;
      color: #999;
      background-color: #f2f2f2;
      text-align: center;
      line-height: 0.66rem;
      outline: none;
      border: none;
    }
    .button_active {
      background: #43a5ff;
      color: #fff;
    }
  }
  .submit {
    margin-top: 1.29rem;
    text-align: center;
    button {
      width: 5rem;
      height: 1rem;
      color: #999;
      background: #f2f2f2;
      font-size: 0.34rem;
      text-align: center;
      line-height: 1rem;
      border: none;
      outline: none;
    }
    .submit_active {
      background: #43a5ff;
      color: #fff;
    }
  }
}
</style>
